<template>
  <div id="agree-friend-push-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">添加好友</h1>
      <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="addFriendData">发送</button>
    </header>
    <div class="agree-friend-push-panel margin-top-60 w-panel">
      <div class="mui-input-row">
        <label>备注:</label>
        <input type="text" placeholder="请输入好友备注" v-model="friendAlias" />
      </div>
      <div class="mui-input-row">
        <label>分组:</label>
        <van-dropdown-menu>
          <van-dropdown-item v-model="friendGroupId" :options="nowUserGroup" />
        </van-dropdown-menu>
      </div>
      <div class="mui-input-row">
        <label>验证信息:</label>
        <textarea v-model="friend_content" placeholder="请输入好友验证" cols="30" rows="10"></textarea>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { WebSocketServer } from "../assets/js/websocket";
Vue.use(DropdownMenu).use(DropdownItem);
export default {
  data() {
    return {
      friendAlias: "",
      friendGroupId: "",
      friend_id: "",
      friendCare: 0,
      friendShielding: 0,
      push_id: "",
      friend_content: "",
      nowUserGroup: []
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },
    addFriendData: function() {
      if (this.friendAlias == "") {
        Toast("请输入备注");
        return false;
      }
      if (this.friendGroupId == "") {
        Toast("请选择好友分组");
        return false;
      }
      if (this.friend_content == "") {
        Toast("请输入好友验证");
        return false;
      }
      var data = {
        type: 1,
        content: this.friend_content,
        user_id: this.friend_id,
        group_id: this.friendGroupId,
        alias: this.friendAlias
      };
      axios({
        url: api.friend.pushFriend,
        method: "post",
        data: data
      }).then(res => {
        res = res.data;
        console.log(res);
        if (res.code) {
          Toast("发送验证成功");
          var user = localStorage.getItem("Now_User");
          user = JSON.parse(user);
          WebSocketServer.sendPush({
            target: this.friend_id,
            action: "FriendPush",
            header: user.user_header,
            data: {
              user_name: user.user_name,
              content: this.friend_content
            }
          });
          this.$router.go(-1);
          return true;
        }
        Toast(res.msg);
      });
    }
  },
  created() {
    this.friend_id = this.$route.query.friend_id;
    this.friendAlias = this.$route.query.user_name;
    axios({
      method: "post",
      url: api.friend.getFriendEditGroup
    }).then(res => {
      this.nowUserGroup = res.data.data;
    });

    var user = localStorage.getItem("Now_User"); // Cookies.get("Now_User");
    user = JSON.parse(user);
    var sex = user.user_sex == 1 ? "帅哥" : "美女";
    this.friend_content =
      "我是来自" + user.user_address + "的一枚" + user.user_constellation + sex;
  }
};
</script>
<style>
#agree-friend-push-body .van-dropdown-menu.van-hairline--top-bottom {
  position: absolute;
  left: 125px;
  line-height: 40px;
  height: 40px;
}
</style>